<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common::common(title='基础数据')">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" ></meta>
    <style>
    	a {
    		color:bule;
    	}
    </style>
</head>
<script type="text/javascript" th:src="@{/js/testcase/caseLibrary.js?v=1}"></script>
<body>
<div id="app">
  <el-container style="margin-top:10px;">
	<el-header>
	    	<el-form ref="form" :model="queryData" label-width="80px">
		    	<el-row :gutter="20">
				  <el-col :span="6">
				  		<el-form-item label="用例库">
				  			<el-select v-model="queryData.libraryCode" placeholder="请选择用例库" @change="libraryChange" clearable>
							    <el-option
							      v-for="item in libraryData"
							      :key="item.id"
							      :label="item.name"
							      :value="item.id">
							    </el-option>
							</el-select>
						</el-form-item>
				  </el-col>
				  <el-col :span="6">
				  		<el-form-item label="所属模块">
				  			<el-select v-model="queryData.moduleCode" placeholder="请选择用例库" @change="moduleChange" clearable>
							    <el-option
							      v-for="item in moduleData"
							      :key="item.id"
							      :label="item.name"
							      :value="item.id">
							    </el-option>
							</el-select>
						</el-form-item>
				  </el-col>
				  <el-col :span="6">
				  		<el-form-item label="标题">
					  		<el-input placeholder="请输入标题" v-model="queryData.title" clearable>
							</el-input>
						</el-form-item>
				  </el-col>
				  <el-col :span="6">
				  	<el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
				  </el-col>
				</el-row>
	    	</el-form>
	    </el-header>
	    <el-main style="padding:5px;">
	    	<div style="margin:10px">
				<el-button type="primary" size="medium" icon="el-icon-plus" @click="addItem">增加</el-button>
	    		<el-button type="primary" size="medium" icon="el-icon-edit" @click="editItem(true)">编辑</el-button>
				<el-button type="primary" size="medium" icon="el-icon-delete" @click="deleteItem">删除</el-button>
				<el-button type="primary" size="medium" icon="el-icon-download" @click="exportExcel">导出</el-button>
				<el-button type="primary" size="medium" icon="el-icon-upload" @click="importExcel">导入</el-button>
	    	</div>
	    	<div style="margin:10px;">
	    	  <el-table  
	    	    ref="caseLibraryDatagrid" 
	    	    :data="datagrid"
			    tooltip-effect="dark"
			    style="width: 100%;"
			    max-height="350"
			    @row-click="datagridSelect"
			    @row-dblclick="datagridDbclick"
			    :cell-style="tableCellStyle"
			    border
			    highlight-current-row
			    >
			    	<el-table-column type="index" min-width="30" fixed></el-table-column>
				    <el-table-column prop="libraryName" label="用例库" width="100"> </el-table-column>
				    <el-table-column prop="moduleName" label="模块名" width="100"> </el-table-column>
				    <el-table-column prop="title" label="标题" width="200" show-overflow-tooltip> </el-table-column>
				    <el-table-column prop="type" label="用例类型" width="100"> </el-table-column>
				    <el-table-column prop="level" label="优先级" width="80"> </el-table-column>
				    <el-table-column prop="createByName" label="创建人" width="70"> </el-table-column>
				    <el-table-column prop="createDate" label="创建时间" width="120"> </el-table-column>
				    <el-table-column prop="modifiedByName" label="修改人" width="70"> </el-table-column>
				    <el-table-column prop="modifiedDate" label="修改时间"> </el-table-column>
			  </el-table>
			</div>
			<div style="margin:10px">
			    <el-pagination
			      :current-page="queryData.page"
			      :page-sizes="[10, 20, 40, 100]"
			      :page-size="queryData.rows"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="totalNum"
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      @prev-click="handlePrevClick"
			      @next-click="handleNextClick">
			    </el-pagination>
			 </div>
	    </el-main>
	</el-container>
	<!-- dialog 开始 不需要【删除】 -->
	<el-dialog :visible.sync="dialogConfig.dialogFormVisible" center="true" fullscreen :top="10" :close-on-click-modal="false" :show-close="false">
		  <el-form :model="addData" ref="dialogForm" :rules="rules">
	      	<el-container>
	      		<el-aside style="width:400px">
	      			<el-form-item label="标题" prop="title" 
			      		:label-width="dialogConfig.formLabelWidth">
				      <el-input v-model="addData.title"  auto-complete="off" style="width:220px;"></el-input>
				    </el-form-item>
			      	<el-form-item label="前提条件" prop="prerequisite" 
			      		:label-width="dialogConfig.formLabelWidth">
				      <el-input v-model="addData.prerequisite" type="textarea" :autosize="{ minRows: 5}" auto-complete="off" style="width:220px;"></el-input>
				    </el-form-item>
			      	<el-form-item label="用例步骤" prop="caseSteps" 
			      		:label-width="dialogConfig.formLabelWidth">
				      <el-input v-model="addData.caseSteps" type="textarea" :autosize="{ minRows: 5}" auto-complete="off" style="width:220px;"></el-input>
				    </el-form-item>
			      	<el-form-item label="预期结果" prop="expectedResult" 
			      		:label-width="dialogConfig.formLabelWidth">
				      <el-input v-model="addData.expectedResult" type="textarea" :autosize="{ minRows: 5}" auto-complete="off" style="width:220px;"></el-input>
				    </el-form-item>
	      		</el-aside>
	      		<el-main style="padding:0">
	      			<el-form-item label="所属用例库" prop="libraryName" :label-width="dialogConfig.formLabelWidth">
				        <el-select v-model="addData.libraryCode" placeholder="请选择用例库" @change="libraryChange">
						    <el-option
						      v-for="item in libraryData"
						      :key="item.id"
						      :label="item.name"
						      :value="item.id">
						    </el-option>
						 </el-select>
				    </el-form-item>
			      	<el-form-item label="所属模块名" prop="moduleCode" 
			      		:label-width="dialogConfig.formLabelWidth">
				      	<el-select v-model="addData.moduleCode" placeholder="请选择用例库" @change="moduleChange">
						    <el-option
						      v-for="item in moduleData"
						      :key="item.id"
						      :label="item.name"
						      :value="item.id">
						    </el-option>
						 </el-select>
				    </el-form-item>
				    <el-form-item label="用例类型" prop="type" 
			      		:label-width="dialogConfig.formLabelWidth">
				      	<el-select v-model="addData.type" clearable placeholder="请选择用例库">
						    <el-option
						      v-for="item in typeData"
						      :key="item.itemName"
						      :label="item.itemName"
						      :value="item.itemName">
						    </el-option>
						 </el-select>
				    </el-form-item>
			      	<el-form-item label="优先级" prop="level" 
			      		:label-width="dialogConfig.formLabelWidth">
				      	<el-select v-model="addData.level" clearable placeholder="请选择用例库">
						    <el-option
						      v-for="item in levelData"
						      :key="item.itemName"
						      :label="item.itemName"
						      :value="item.itemName">
						    </el-option>
						 </el-select>
				    </el-form-item>
				    <div style="padding-left:150px;">
				    	<el-button @click="closeDialog">取 消</el-button>
				   		<el-button v-if="dialogConfig.saveAble" type="primary" @click="submitForm('dialogForm')">确 定</el-button>
				    </div>
				    <div style="padding:20px 0 0 150px;" v-if="!isEdit && dialogConfig.saveAble">
				    	<el-checkbox v-model="createNext">继续创建下一个</el-checkbox>
				    </div>
	      		</el-main>
	      	</el-container>
		  </el-form>
	 </el-dialog>
	 <!-- dialog 结束 -->
	<el-dialog :visible.sync="dialogConfig.excelDialogVisible" center="true" >
		<el-upload ref="excelUploader"
		  class="upload-demo"
		  action="importExcel"
		  name="file"
		  :show-file-list="false"
		  :limit="1"
		  :on-success="uploadExcelSuccess"
		  :on-error="uploadExcelError">
		  <el-button size="small" type="primary">点击上传</el-button>
		  <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过数据量不要超过100条</div>
		</el-upload>
		<p style="padding-top:10px;color:blue;">
			<a href="../../templates/caseImport.xlsx" style="color:blue;">点击下载模板</a>
		</p>
	</el-dialog>
	 
</div>

</body>
</html>